<template>
  <div style="height:1000px ;">
    <div id="g_left" style="display: inline-block;margin-top: 50px; float: left;width: 20%">
      <div class="g_bottom" style="border-radius: 6px 6px 0 0;margin-bottom: 20px;background-color: #fff;" v-for="item in articles">
        <h3 style="position: relative;left: -15px;line-height: 60px;font-size: 14px;border-bottom: 1px solid #f2f2f2;">{{item.articleContent}}</h3>
        <ul>
          <li class="m_header"  style="line-height: 40px;text-align: center;" v-for="items in item.children"><el-link :underline="false" @click="guanyu(items)"><p :ref="items.articleId">{{items.articleContent}}</p></el-link></li>
        </ul>
      </div>
    </div>
    <div id="g_right" style="display: inline-block;margin-top: 50px;width: 75%;height: 500px;background: white">
    </div>
  </div>
</template>

<script>
export default {
  name: "guanyu",
  data(){
    return{
      //底部文章集合
      articles:[],
      //文章id
      aid:4,
      //变色元素的值
      a:"",
    }
  },
  created() {
    this.init();
    const routerParams = this.$route.query.key
    this.aid=parseInt(routerParams);
  },
  mounted() {
    this.sse();
  },
  methods:{
    init(){
      //查询底部信息
      var that = this;
      this.$http.get("/home/article/web/getAllartic").then(function (resp) {
        that.articles = resp.data.result;
      })
    },
    guanyu(item){
    this.bianse(item.articleId)
    },
    //选择变色
    bianse(item){

      var that=this;
      this.$nextTick(function () {
        var s = this.aid
        that.$refs[s][0].style.color = ""
        that.$refs[item][0].style.color = "red"
        that.aid = item;
        this.sse();
      })
    },
    //根据id查文章
    sse(){
      var div=document.getElementById("g_right");
      div.innerHTML="";
      this.$http.get("/home/article/findbottom_articleByaId?id="+this.aid).then(function (resp){
        if (resp.data.code==200){
          var article=resp.data.result.article.articleContent;
          var li=resp.data.result.bos;
          var context="";
          context+="<h3 style='margin-top: 15px'>"+article+"</h3>";
          context+="<div id='g_right' style='text-align: left;'>"
          for (let i in li){
            context+="<p style='margin-top: 30px;margin-left: 10px'>"
            context+=li[i].name
            context+="</p>"
          }
          context+="</div>"
          div.innerHTML=context

        }
      })
    },
  },
}
</script>

<style scoped>
p{
  float: left;
}


</style>